<template>
  <div class="login">
    <Header :fixed="true">
      <div slot="title">用户注册</div>
    </Header>
    <div class="logo">
      <img src="@/assets/logo.png" alt="">
    </div>
    <div class="login-box">
      <van-field v-model="form.userName" placeholder="用户名" class="mtop14" />
      <van-field v-model="form.mobilePhone" placeholder="手机号" class="mtop14" />
      <van-field v-model="form.passWord" placeholder="密码" type="password" class="mtop14" />
      <p class="reg-text">点击“注册”表示已阅读并同意<router-link to="/xieyi1" class="text-color">《用户协议》</router-link><router-link to="/xieyi2" class="text-color">《关于评估报告草案的声明》</router-link></p>
      <van-checkbox v-model="checked" checked-color="#07c160" shape="square" class="text-links-c">我已阅读并同意</van-checkbox>
      <van-button class="login-btn" round color="linear-gradient(to right, #5694cf, #53a9e0)" size="large" @click="onSave">下一步</van-button>
    </div>
    <div class="login-f-bg" :style="{backgroundImage: `url(${Bg2})`, display: timer ? 'none' : 'block'}"></div>
  </div>
</template>

<script>
import Bg2 from '@/assets/fobg.png'
import Header from '@/components/Header'
import { registerValid } from '@/api/user'
  import { format } from 'path'
export default {
  name: 'register',
  data () {
    return {
      form: {
        userName: '',
        mobilePhone: '',
        passWord: ''
      },
      Bg2,
      fullHeight: document.documentElement.clientHeight,
      height: '',
      timer: false,
      checked: false
    }
  },
  components: {
    Header
  },
  mounted () {
    const that = this
    window.onresize = () => {
      return (() => {
        that.height = document.documentElement.clientHeight
      })()
    }
  },
  watch: {
    height (val) {
      if(this.fullHeight > val) {
        this.timer = true
      } else {
        this.timer = false
      }
    }
  },
  methods: {
    onSave () {
      if (!this.checked) {
        this.$toast('请阅读并同意协议！');
        return
      }
      registerValid(this.form).then(res => {
        if (res.data.result == 'suc') {
          let obj = {
            mobilePhone: this.form.mobilePhone,
            userName: this.form.userName,
            passWord: this.form.passWord
          }
          sessionStorage.setItem('info', JSON.stringify(obj))
          this.$router.push('/code')
        } else {
          this.$toast('手机号不合法或已注册！');
        }
      })
    }
  }
}
</script>

<style lang="less">
@import '~@/assets/css/index.less';
.logo {
  text-align: center;
  padding: 32px 0 6px 0;
  margin-top: 58px;
  img {
    width: 213px;
    height: 63px;
  }
}
.login-box {
  padding: 0 10% 0 10%;
  .reg-text {
    font-size: @small-size;
    color: #a0a3a3;
    padding:  32px 16px 12px 16px;
    line-height: 20px;
    .text-color {
      color: #5695cf;
    }
  }
  .fr {
    display: block;
    float: right;
    font-size: @normal-size;
    line-height: 24px;
    color: #292929;
    padding: 0 6px;
  }
  .text-links-c {
    text-align: left;
    padding-left: 20px;
    .van-checkbox__label {
      font-size: @small-size;
      color: #a0a3a3;
    }
  }
  .mtop14 {
    margin-top: 14px;
  }
  .login-btn {
    margin-top: 10px;
  }
}
.login-f-bg {
  width: 100%;
  height: 91px;
  background: center center no-repeat;
  background-size: 100% 100%;
  position: fixed;
  left: 0;
  bottom: 0;
}
</style>